<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../libs/js/vue.js"></script>
    <script src="../libs/js/vue-router.js"></script>  
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <script src="../libs/layer/layer.js"></script>
    <!-- $.ajax  -->
    <title>Document</title>
    <style>
        .box{
            width:80%;
            min-height:400px;
            border-radius: 10px;
            border:1px solid darkorange;
        }
        .router-link-exact-active, .router-link-active{
            background: darkred;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2> {{msg }}</h2>
        
        <my-head></my-head>
        <!-- 6. 导航跳转 -->
        <hr>
        <!-- 5 路由出口  显示加载当前的路由组件  -->
        <div class="box">
            <router-view></router-view>
        </div>

    </div>

    <template id="head">
        <header>
            <h2>Head- wh2107-daydayup</h2>
        </header>
    </template>

    <template id="main">
        <div>
            <h2>App - App  - 主页 </h2>
            <router-view></router-view>
            <hr>
            <Foot></Foot>
        </div>
    </template>
    <template id="wechat">
        <div>
            <h2>wechat - wechat  - 聊天 </h2>
            <h1 @click="count++">count == {{count }}</h1>
        </div>
    </template>
    <template id="contact">
        <div>
            <h2>contact - contact  - 通讯录 </h2>
            <div>
                <p v-for="(l,i) in users" :key="i">
                    <router-link :to="{name:'user',params:{uid:l.id},query:{title:l.title}}"> {{l.title}}</router-link>
                </p>
            </div>
        </div>
    </template>
    <template id="friend">
        <div>
            <h2>friend - friend  - 朋友圈 </h2>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>mine - mine  - 我的 </h2>
        </div>
    </template>
    
    <template id="foot">
        <footer>
            <div>
                <router-link :to="{name:l.name}" v-for="(l,i) in flist" :key="i">
                    {{l.text}}
                </router-link>
            </div>
        </footer>
    </template>
    <template id="user">
        <div>
            <h2> 
                user - 联系人员 
            </h2>
            <h2>
                id:   {{$route.params.uid}}
            </h2>
            <h3>
                名称： {{$route.query.title}}
            </h3>
            <button @click="$router.go(-1)">返回</button>
        </div>
    </template>
    <script>
        const Head = {
            template:"#head"
        }
        Vue.component("my-head",Head)
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  Vue脚手架

        // 1. 定义路由组件
        const App = {
            template:"#main",
        }
        const Wechat = {
            template:"#wechat",
            data(){
                return {
                    count:1
                }
            },
            beforeRouteEnter(to,from,next){
                // this. === >  不是 Wechat 
                next()
                console.log("beforeRouteEnter")
            },
            beforeRouteUpdate(to,from,next){
                // 参数改变了  
                next();
                console.log("beforeRouteUpdate")
            },
            beforeRouteLeave(to,from,next){
                layer.msg("请记得回来哦...")
                next()
                console.log("beforeRouteLeave")
            },
            mounted(){

            }
        }
        const Contact = {
            template:"#contact",
            data(){
                return {
                    users:[
                        {
                            title:"张三",
                            id:1,
                        },
                        {
                            title:"李四",
                            id:2,
                        },
                        {
                            title:"王五",
                            id:3,
                        }
                    ]
                }
            }
        }
        const User = {
            template:"#user"
        }
        const Friend = {
            template:"#friend",
        }
        const Mine = {
            template:"#mine",
        }
        
        const Foot = {
            template:"#foot",
            data(){
                return {
                    flist:[
                        {path:"wechat", name:"wechat",text:"微信",icon:""},
                        {path:"contact", name:"contact",text:"通讯录",icon:""},
                        {path:"friend", name:"friend",text:"朋友圈",icon:""},
                        {path:"mine", name:"mine",text:"我的",icon:""},
                    ]
                }
            }
        }
        Vue.component("Foot",Foot)
        

        // 2. 定义路由配置参数
        const routes = [
            {
                path:"/",
                redirect:{name:'app'}
            },
            {
                path:"/app",
                name:'app',
                component:App,
                redirect:"/app/wechat",
                children:[   // 子路由  
                    {path:"wechat", name:"wechat",component:Wechat},
                    {
                        path:"contact", 
                        name:"contact",
                        component:Contact,
                        beforeEnter:(to,from,next)=>{
                            layer.confirm('您是如何看待前端开发？', {
                                btn: ['重要','奇葩'] //按钮
                                    }, function(){
                                    layer.msg('的确很重要', {icon: 1});
                                        next()
                                    }, function(){
                                        next(false)
                                    layer.msg('也可以这样', {
                                        time: 20000, //20s后自动关闭
                                        btn: ['明白了', '知道了']
                                });
                                
                            });
                        }
                    
                    },
                    {path:"friend", name:"friend",component:Friend},
                    {path:"mine", name:"mine",component:Mine},
                    {path:"*",redirect:{name:"wechat"}}
                ]
            },
            {
                path:"/user/:uid",
                name:"user",
                component:User
            },
            {
                path:"*",
                redirect:"/app"
            }
        ]
        // 3. 创建路由对象
        const router = new VueRouter({
            routes,
            mode:"hash",
            base:"",
        })

        router.beforeEach((to,from,next)=>{
            console.log('beforeEach  全局路由前置守卫')
            console.log(to)
            console.log(from)
            if(to.name=="mine"){
                layer.alert("请确认是否已经登录",{
                   
                },res=>{
                    console.log(res)
                    next();
                    layer.close(res)
                },err=>{
                    console.log(err)
                    next(false)
                })
            }else{
                next()
            }
            
        })

        router.afterEach((to,from)=>{
            console.log('afterEach  全局路由后置守卫')
        })
        // base 应用的基路径  一般不用设置   采用是相对路径 
        // mode 路由模式   hash  url地址的 hash 模式  兼容性强     带#号 可以刷新浏览器  但是地址比较长 不简洁
        // history  不带 # 号  不能刷新浏览器 (需要服务器重定向404 )   比较简洁优雅   依赖 HTML5 History API 和服务器配置7
        // 4.挂载到根实例
        const vm = new Vue({
            // this.$router 获取路由对象
            router,
            el:"#app",
            data:{
                msg:"路由基础  - 路由守卫  (微信路由)"
            },
            watch:{
                '$route':function(to,from){   // 监听路由切换
                    console.log(to)    // 进入的新路由
                    console.log(from)  // 离开的旧路由 
                }
            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
                console.log(this.$router)    // 路由对象  负责路由切换 重定向
                console.log(this.$route)     // 路由信息对象  记录当前路由的相关数据信息  (参数 params query meta )
            }
        })
    </script>

     <!-- 
        嵌套路由  路由嵌套组件  
        你有多少层嵌套就写多少个 router-view



        配置简单 路由 

        路由守卫   阻止你进入或者离开当前路由 

        用来判断时候可以进入或者离开当前路由  

        路由导航守卫    分三种   
        a.  全局前置守卫  router.beforeEach(to,from,next)
            全局后置守卫  router.afterEach(to,from)

        b.  路由独享的守卫  beforeEnter(to,from,next)  进入当前路由之前触发 

        c.  路由组件内直接定义以下路由导航守卫  component
            beforeRouteEnter    进入这个组件之前
            beforeRouteUpdate   组件数据更新  
            beforeRouteLeave    离开这个组件之前  
  -->
</body>
</html>